.sticky-header {
  @apply sticky left-0 right-0 z-20 p-12 pb-6 top-[-2.5rem] bg-transparent;

  &::before {
    @apply absolute inset-0 content-[''];

    background: var(--n-color);
    mask-image: linear-gradient(
      rgb(255, 255, 255) 80%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  @screen phone {
    @apply px-6;
  }
}
.header {
  display: flex;
  justify-content: space-between;

  @apply select-none relative z-10;

  & .title {
    @apply flex items-center;

    font-size: 1.73rem;
  }
}

.main {
  @apply p-12;

  padding-top: 6px;

  @screen phone {
    & {
      @apply p-4;
    }
  }
}

.buttons {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  display: flex;
  flex-direction: column;
  z-index: 30;

  button {
    @apply flex items-center justify-center;

    z-index: 3;
    box-sizing: border-box;
    width: 2.8em;
    height: 2.8em;
    color: #795548;
    margin-top: 0.5em;
    background: #fff;
    border-radius: 66%;
    transition: transform 0.3s, background 0.3s, color 0.3s;
    animation: show 0.5s both;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
    &:not(:first-child) {
      margin-top: 0.8rem;
    }
  }

  @screen phone {
    & {
      @apply flex-row items-center justify-center right-[1.5rem] bottom-[1.5rem];
    }

    & button {
      @apply !mt-0 ml-3;
    }
  }
}

.header-actions {
  @apply right-0 mr-12 phone:mr-0 top-0 bottom-0 flex items-center relative;

  & > button,
  & > a {
    @apply h-12 w-12 flex items-center justify-center shadow-2xl;
  }

  a > button {
    @apply h-full w-full;
  }
}

:global(html.dark) {
  .buttons button {
    @apply bg-gray-600 text-blue-300;
  }
}
